 r<template>
  <div class="home h100">
    <header>
    </header>
    <main>
        <router-view :key="$route.fullPath"/>
    </main>
    <footer>
        <van-tabbar v-model="active">
        <van-tabbar-item
            v-for="(item, index) in list"
            :key="index"
            :to="item.path" 
            :icon="item.id==active?item.imgs:item.img">
            {{ item.title }}
        </van-tabbar-item>
        </van-tabbar>
    </footer>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // id:0,
            active:0,
            list:[
                {
                    id:0,
                    path:"/home/homes",
                    title:"首页",
                    img:require("../assets/home-images/编组备份 3.png"),
                    imgs:require("../assets/home-images/a.png")
                },
                {
                    id:1,
                    path:"/home/serve",
                    title:"服务",
                    img:require("../assets/home-images/_ .png"),
                    imgs:require("../assets/home-images/b.png")
                },
                {
                    id:2,
                    path:"/home/message",
                    title:"消息",
                    img:require("../assets/home-images/m.png"),
                    imgs:require("../assets/home-images/备份2.png")
                },
                {
                    id:3,
                    path:"/home/my",
                    title:"我的",
                    img:require("../assets/home-images/_.png"),
                    imgs:require("../assets/home-images/_备份 13.png")
                },
            ],
            
        }
    },
    created() {
        this.active = this.list.filter(item => item.path === this.$route.path)[0].id
    },
    updated() {
        this.active = this.list.filter(item => item.path === this.$route.path)[0].id
    },
}
</script>

<style scoped>
.home{
    display: flex;
    flex-direction: column;
}
main{
    flex: 1;
    overflow-y: auto;
}
.van-tabbar-item--active{
    color: #333333;
}
</style>